<template>
    <div>{{value1}}</div>
    <div>
        <button @click="add">（ex3）点击我</button>
    </div>
</template>

<script>
/**
 * 作用：专门为了写vue3的组合式api
 *      1.可以在setup中定义数据，并且返回出去，在模板中使用
 *      2.可以在setup中使用计算属性和侦听器
 *      3.可以在setup中使用生命周期钩子
 * 
 * 怎么写：整体就是最基本写法。
 *      在setup里面必须返回一个对象，让外面的template模板可以使用
 * 
 */
export default{
    //组合式api   
    setup(){
        //声明变量
        let value1 = 20;
        //创建方法：  此时add方法是局部数据 需要在return出去
        const add = ()=>{
            value1 ++;
            console.log(value1)
        };
        //返回值
        return {
            //，目前这个value1不是响应式数据 不会在页面上面变 只能在控制台打印。
            value1,
            add
        };
    },
};


</script>

<style>


</style>